<template>
    <div class="sort_item flex-row" @click="changeSort">
        <span>{{ name }}</span>
        <div class="sort_icon_box flex-column">
            <a-icon type="caret-up" :class="['sort_icon',current==1 && 'sort_icon_active']" theme="filled" />
            <a-icon type="caret-down" :class="['sort_icon',current==2 && 'sort_icon_active']" theme="filled" />
        </div>
    </div>
</template>
<script>
export default {
    name: 'SortHeader',
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            current: 0
        };
    },
    methods: {
        changeSort() {
            this.current++;
            let current = this.current;
            let type = '';
            switch (current) {
                case 1:
                    type = 'up';
                    break;
                case 2:
                    type = 'down';
                    break;
                default:
                    this.current = 0;
                    type = '';
            }
            this.$emit('sort', { type });
        }
    }
};
</script>
<style lang="scss" scoped>
.sort_item {
    align-items: center;
    .sort_icon_box{
        margin-left: 4px;
    }
}
.sort_icon{
    font-size: 12px;
    width: 12px;
    height: 9px;
    color: #999;
}
</style>
